<template>
  <div class="page">
    <el-button @click="$refs.popDialog.open()">打开弹窗</el-button>
    <Pop ref="popDialog">
      <template v-slot:title>当日实时目标列表</template>
      <template v-slot:content>内容区域</template>
    </Pop>
    <el-button type="primary"  @click="chanPage('/dapin')">BI大屏</el-button>
      <el-button type="primary"  @click="chanPage('/page')">弹窗</el-button>
      <el-button type="primary"  @click="chanPage('/login')">聊天</el-button>
      <el-button type="primary"  @click="chanPage('/pagination')">字典维护</el-button>
  </div>
</template>

<script>
export default{
    data(){
        return{
        }
    },
    methods:{
      chanPage(path){
        this.$router.push({ path: path });
      }
    }
}
</script>
<style scoped>
html, body {
    margin: 0;
    padding: 0;
  }
 /* 给容器设置背景图片堆叠效果 */
 .page{
    min-height: 100vh;
  /* 背景图片顺序：主背景在前，叠加图片在后 */
  background-image:
    url('../assets/images/layout/big-bj.png'),
    url('../assets/images/layout/header.png'),
    url('../assets/images/layout/footer.png'),
    url('../assets/images/dialog/bj.png');

  /* 设置尺寸和定位 */
  background-size:
    100% 100%,         
    80% auto,       
    40% auto,       
    100% 100%;       

  background-position:
     center 20px,         
   top 65px left 115px,    
    bottom 30px left 330px, 
    center;

  background-repeat: no-repeat;
  }
</style>